// 设备管理页面-设备信息
import { useQuery } from '@tanstack/react-query';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react';
import { useEffect, useState } from 'react';

import api from '@/apis/api';

import Buttons from '../components/buttons';

interface DataType {
  id: number;
  manufactureName: string;
  deviceName: string;
  interfaceVersion: string;
  softwareVersion: string;
  submitNumber: string;
  asymAlgAbility: string;
  symAlgAbility: string;
  hashAlgAbility: string;
}

const DevicesInfo: React.FC = () => {
  const [deviceInfoTable, setDeviceInfoTable] = useState<DataType[]>([
    // {
    //   id: 1,
    //   manufactureName: 'YSK',
    //   deviceName: 'RSP20',
    //   interfaceVersion: 'x.x.x.x',
    //   softwareVersion: 'x.x.x.x',
    //   submitNumber: '2021-0001',
    //   asymAlgAbility: 'RSA|SM2|Paillier',
    //   symAlgAbility: 'AES|SM4|SM1',
    //   hashAlgAbility: 'SHA256|SHA512|SM3',
    // },
  ]);

  // 表格属性
  const columns: ColumnsType<DataType> = [
    {
      title: '厂商名称',
      dataIndex: 'manufactureName',
      key: 'manufactureName',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      key: 'deviceName',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '接口版本',
      dataIndex: 'interfaceVersion',
      key: 'interfaceVersion',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '软件版本',
      dataIndex: 'softwareVersion',
      key: 'softwareVersion',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '序列号',
      dataIndex: 'submitNumber',
      key: 'submitNumber',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '支持的非对称算法',
      dataIndex: 'asymAlgAbility',
      key: 'asymAlgAbility',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '支持的对称算法',
      dataIndex: 'symAlgAbility',
      key: 'symAlgAbility',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '支持的摘要算法',
      dataIndex: 'hashAlgAbility',
      key: 'hashAlgAbility',
      width: '5%',
      align: 'center',
      fixed: 'left',
    },
  ];

  const { data: deviceInfo } = useQuery({
    queryKey: ['getDeviceInfo'],
    queryFn: async (params) => {
      const res: any = await api.GetDeviceInfo(params);
      return res.data;
    },
  });

  useEffect(() => {
    if (deviceInfo) {
      const { items } = deviceInfo;
      if (items.length > 0) {
        setDeviceInfoTable(items);
      } else {
        setDeviceInfoTable([items]);
      }
    }
  }, [deviceInfo]);

  return (
    <>
      {/* 按钮组件 */}
      <div
        style={{
          background: '#fff',
          marginTop: '-24px',
          padding: '24px',
        }}
      >
        <Buttons />
      </div>

      <div
        style={{
          background: '#fff',
          padding: '24px',
          marginBottom: '24px',
          marginTop: '24px',
        }}
      >
        <div>
          <div>
            <Table
              dataSource={deviceInfoTable}
              columns={columns}
              rowKey={(record) => record.id.toString()}
              pagination={false} // 禁用分页
            />
          </div>
        </div>
      </div>
    </>
  );
};
export default DevicesInfo;
